<template>
  <div class="app">
    <div class="box top_1">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="14">
          <div class="item">
            <div style="width: 100%; font-size: 20px">
              <span style="padding: 15px">服务订阅排行(Top 10) </span>
            </div>
            <div id="bing5" ref="bing5"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item1">
            <div style="width: 100%; font-size: 20px">
              <span style="padding: 15px; display: inline-block">项目订阅服务统计 </span>
            </div>
            <div style="height: 90%">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column label="序号" width="180" align="center">
                  <template slot-scope="scope">
                    <div :style="{ width: '40px', backgroundColor: getColorByIndex(scope.$index), 'text-align': 'center', color: '#ffffff' }">
                      {{ scope.$index + 1 }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ObjName" label="项目名称" width="180" align="center"> </el-table-column>
                <el-table-column prop="serviceSubscriberCount" label="服务订阅总数" width="180" align="center"> </el-table-column>
                <el-table-column prop="monthCallerNum" label="近一个月调用次数" align="center"> </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { serviceSubscriberTop, objectSubscriberCount } from '@/api/index/index'
export default {
  data() {
    return {
      itemObj: {
        echarts1: null,
      },
      tableData: [],
      option: {},
      title: [],
      valuenum: [],
    }
  },

  mounted() {
    objectSubscriberCount().then((res) => {
      if (res.data.code == 200) {
        for (const key in res.data.data.serviceAccessToday) {
          this.tableData.push(res.data.data.serviceAccessToday[key])
          this.tableData.sort((a, b) => {
            return b.serviceSubscriberCount - a.serviceSubscriberCount
          })
        }
      }
    })
    serviceSubscriberTop().then((res) => {
      if (res.data.code == 200) {
        res.data.data.map((v, i) => {
          this.title.push(v.apiName)
          this.valuenum.push(v.apiDescription)
        })
      }

      this.echarts1()
    })
  },

  methods: {
    getColorByIndex(index) {
      return index === 0 ? '#FF302C' : index === 1 ? '#00BE92' : index === 2 ? '#FF8A00' : '#158BCD'
    },
    colorfilter(value) {
      switch (value) {
        case 1: {
          return 'red'
        }
        case 2: {
          return 'orange'
        }
        case 3: {
          return 'yellow'
        }
        default: {
          return '#ccc'
        }
      }
    },
    echarts1() {
      this.itemObj.echarts1 = this.$echarts.init(document.getElementById('bing5'))
      var option = {
        tooltip: {},
        grid: {
          //直角坐标系内绘图网格
          show: true, //是否显示直角坐标系网格。[ default: false ]
          // left: '0%', //grid 组件离容器左侧的距离。
          // right: '30px',
          // borderColor: '#c45455', //网格的边框颜色
          bottom: '35%', //
        },
        xAxis: {
          data: this.title,
          axisLabel: {
            interval: 0,
            rotate: -40,
          },
        },
        yAxis: {},

        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              //formatter: '{a}:{b}: {c}'
            },
            data: this.valuenum,
            itemStyle: {
              color: '#f9d196',
            },
          },
        ],
      }

      this.itemObj.echarts1.setOption(option)
      // 在窗口大小变化时调用 resize 方法
      window.addEventListener('resize', this.handleResize)
    },
    handleResize() {
      this.itemObj.echarts1.resize()
      console.log('1111111111111111111')
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>
<style lang="scss" scoped>
::v-deep(.el-table .cell) {
  display: flex !important;
  justify-content: center !important;
}
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
.el-row {
  width: 100%;
}

.box {
  border-radius: 5px;
}
.el-col-14 {
  width: 52.5% !important;
}
.el-col-8 {
  width: 45.5% !important;
}
.top_1 {
  width: 100%;
  height: 50vh;
  margin-top: 20px;
  .el-row {
    display: flex;
    justify-content: space-between;
    .item1 {
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 21px;
      overflow: auto;
    }
    .item {
      width: 100%;
      height: 100%;
      background-color: white;
      border-radius: 21px;
      #bing5 {
        width: 100%;
        height: 90%;
      }

      div {
        display: flex;
        align-items: center;
        h6 {
          width: 2vw;
          height: 40px;
          text-align: center;
          line-height: 40px;
          margin: 0px !important;
        }
      }
    }
  }
}
</style>
